<template>
    <div>
        <el-tabs>
            <el-tab-pane  label="采购单">
                <el-form :model="caigou" label-width="110px" style="overflow:hidden">
                    <el-form-item prop="appCaiDan" label="采购单号" class="inline__">
                        <el-input v-model="caigou.caiDan" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="emp" label="采购员" class="inline__">
                        <el-select v-model="caigou.emp" placeholder="请选择采购员" value-key="empId">
                            <el-option v-for="i in empList" :key="i.empId" :label="i.empName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采购日期" prop="deliveryDate" class="inline__">
                        <el-date-picker v-model="caigou.deliveryDate" type="date" placeholder="请选择采购日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item prop="deliveryType" label="交货方式" class="inline__">
                        <el-select v-model="caigou.deliveryType" placeholder="请选择交货方式" value-key="deliveryId">
                            <el-option v-for="i in deliveryTypeList" :key="i.deliveryId" :label="i.deliveryName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="payWey" label="支付方式" class="inline__">
                        <el-select v-model="caigou.payWey" placeholder="请选择支付方式" value-key="payId">
                            <el-option v-for="i in payWeyList" :key="i.payId" :label="i.payName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="invoiceType" label="发票类型" class="inline__">
                        <el-select v-model="caigou.invoiceType" placeholder="请选择发票类型" value-key="invoiceId">
                            <el-option v-for="i in invoiceTypeList" :key="i.invoiceId" :label="i.invoiceName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="appointPay" label="付款约定" class="inline__">
                        <el-select v-model="caigou.appointPay" placeholder="请选择付款约定" value-key="appointId">
                            <el-option v-for="i in appointPayList" :key="i.appointId" :label="i.appointName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="addDel" label="备注" class="inline__">
                        <el-input v-model="caigou.addDel"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="save">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        name: "update_order",
        data:function () {
            return{
                //支付方式数据
                payWeyList:[],
                //发票类型数据
                invoiceTypeList:[],
                //付款约定数据
                appointPayList:[],
                //交货方式数据
                deliveryTypeList:[],
                //采购员数据
                empList:[],
                //采购单数据
                caigou:{
                    caiDan:'',
                    deliveryDate:'',
                    addDel:'',
                    state:1,
                    appCai:{},
                    emp:{},
                    caiId:'',
                    appointPay:{},
                    deliveryType:{},
                    invoiceType:{},
                    payWey:{}
                }
            }
        },
        methods:{
            //初始化数据
            init(){
                this.axios.get("api/caigou/pay-list").then(v=>{
                    this.payWeyList=v.data;
                }).catch()
                this.axios.get("api/caigou/invoice-list").then(v=>{
                    this.invoiceTypeList=v.data;
                }).catch()
                this.axios.get("api/caigou/appoint-list").then(v=>{
                    this.appointPayList=v.data;
                }).catch()
                this.axios.get("api/caigou/delivery-list").then(v=>{
                    this.deliveryTypeList=v.data;
                }).catch()
                this.axios.get("api/cai-emp").then(v=>{
                    this.empList=v.data;
                }).catch()
            },
            //保存
            save(){
                this.axios.get("api/caigou/update-cai",
                    {params:{"empId":this.caigou.emp.empId,"deliveryId":this.caigou.deliveryType.deliveryId,
                        "invoiceId":this.caigou.invoiceType.invoiceId,"payId":this.caigou.payWey.payId,
                        "appointId":this.caigou.appointPay.appointId,"deliveryDate":this.caigou.deliveryDate,
                        "caddDel":this.caigou.addDel,"caiId":this.caigou.caiId}}).then(()=>{
                    this.$store.state.vueAppCai.detailData.addDel=this.caigou.addDel
                    this.$store.state.vueAppCai.detailData.deliveryDate=this.caigou.deliveryDate
                    this.$store.state.vueAppCai.detailData.appointPay=this.caigou.appointPay
                    this.$store.state.vueAppCai.detailData.deliveryType=this.caigou.deliveryType
                    this.$store.state.vueAppCai.detailData.emp=this.caigou.emp
                    this.$store.state.vueAppCai.detailData.invoiceType=this.caigou.invoiceType
                    this.$store.state.vueAppCai.detailData.payWey=this.caigou.payWey
                    this.clear();
                    this.$store.state.vueAppCai.updateorderVisible = false;
                    this.global.mes_success("修改成功");
                }).catch()
            },
            //取消
            cancel(){
                this.$store.state.vueAppCai.updateorderVisible = false;
                this.clear()
            },
            //清空采购数据
            clear(){
                this.caigou = {
                    caiDan:'',
                    deliveryDate:'',
                    addDel:'',
                    state:1,
                    appCai:{},
                    emp:{},
                    caiId:'',
                    appointPay:{},
                    deliveryType:{},
                    invoiceType:{},
                    payWey:{}
                }
            }
        },
        created() {
            this.init()
        }
    }
</script>
<style scoped>
    .inline__{width:90%!important;display:inline-block}
    .el-select{width:100%!important;}
</style>